@import '../global/variables.css';

.alert {
  --ring-alert-animation-duration: 300ms;
  --ring-alert-animation-easing: ease-out;

  position: relative;

  display: flex;
  align-items: baseline;

  box-sizing: border-box;
  min-height: calc(var(--ring-unit) * 5);
  margin: var(--ring-unit) auto;
  padding: 0 calc(var(--ring-unit) * 2);

  transition:
    transform var(--ring-alert-animation-duration) var(--ring-alert-animation-easing),
    margin-bottom var(--ring-alert-animation-duration) var(--ring-alert-animation-easing),
    opacity var(--ring-alert-animation-duration) var(--ring-alert-animation-easing);
  white-space: nowrap;
  pointer-events: auto;

  border-radius: var(--ring-border-radius);
  background-color: var(--ring-popup-background-color);
  box-shadow: var(--ring-popup-shadow);

  font-size: var(--ring-font-size);
  line-height: calc(var(--ring-unit) * 5);
}

.alertInline {
  margin: var(--ring-unit);
}

.error {
  word-wrap: break-word;

  color: var(--ring-error-color);
}

.icon {
  margin-right: var(--ring-unit);
}

.caption {
  overflow: hidden;

  max-width: calc(100% - calc(var(--ring-unit) * 5));

  margin: 12px 0;

  white-space: normal;

  color: var(--ring-active-text-color);

  line-height: 20px;

  &.withCloseButton {
    margin-right: calc(var(--ring-unit) * 5);
  }
}

.badge {
  margin-left: var(--ring-unit);

  vertical-align: baseline;
}

.loader {
  top: 2px;

  margin-right: var(--ring-unit);
}

.close.close {
  position: absolute;
  top: 2px;
  right: 0;

  margin: calc(var(--ring-unit) / 2);
  padding: var(--ring-unit);

  font-size: 0;
  line-height: 0;
}

@keyframes show {
  from {
    transform: translateY(100%);

    opacity: 0;
  }

  to {
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes shaking {
  10%,
  90% {
    transform: translateX(-1px);
  }

  20%,
  80% {
    transform: translateX(2px);
  }

  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }

  40%,
  60% {
    transform: translateX(4px);
  }
}

.animationOpen {
  animation-name: show;
  animation-duration: var(--ring-alert-animation-duration);
}

.animationClosing {
  z-index: var(--ring-invisible-element-z-index);

  opacity: 0;
}

.animationShaking {
  animation-name: shaking;
  animation-duration: 500ms;
}
